<!DOCTYPE html>
<html>

<head lang="en">
    <!-- 
    监听事件
    事件处理方法
    内联处理器中的方法
    多事件处理器
    事件修饰符
    按键修饰符
    系统修饰符
     -->

    <meta charset="utf-8">
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <!-- 阻止单击事件继续冒泡 -->
    <a @click.stop="doThis"></a>

    <!-- 提交事件不再重载页面 -->
    <form @submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <a @click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 -->
    <form @submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div @click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div @click.self="doThat">...</div>
    <div id="basic-event" class="demo">
        <button @click="counter += 1">Add 1</button>
        <p>The button above has been clicked {{ counter }} times.</p>
    </div>
    <script type="text/javascript">
        Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            }
        }).mount('#basic-event')
    </script>

    <style type="text/css">
        .demo {
            font-family: sans-serif;
            border: 1px solid #eee;
            border-radius: 2px;
            padding: 20px 30px;
            margin-top: 1em;
            margin-bottom: 40px;
            user-select: none;
            overflow-x: auto;
        }
    </style>

</body>

</html>